<!--
 * @description  : 市管-特殊区域列表查询条件
 * @descriptionDetail: 市管-特殊区域列表查询条件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-26 18:43:02
-->
<template>
  <view class="page">
    <view class="cearch_title">
      查询条件
    </view>
    <u-form :model="queryForm" label-position="top" label-width="auto" style="padding: 80rpx 32rpx 160rpx 32rpx" ref="uForm">
      <u-form-item label="组织机构" right-icon="arrow-right">
        <u-input
          :disabled="true"
          placeholder="请选择"
          v-model="orgName"
					:custom-style="pointerStyle"
          @click="choiceOrg"
        >
        </u-input>
      </u-form-item>
      <u-form-item label="区域名称">
        <u-input placeholder="请输入" v-model="queryForm.areaName" />
      </u-form-item>
      <u-form-item label="类型名称">
        <u-input :border="false" type="select" :select-open="typeShow" placeholder="请选择" v-model="queryForm.typeName" @click="typeShow = true"></u-input>
        <u-select mode="single-column" label-name="text" :list="typeList" v-model="typeShow" @confirm="selectTypeConfirm($event)"></u-select>
      </u-form-item>
      <u-form-item label="负责人">
        <u-input placeholder="请输入" v-model="queryForm.manager" />
      </u-form-item>
      <u-form-item label="地址">
        <u-input placeholder="请输入" v-model="queryForm.address" />
      </u-form-item>
      <u-form-item label="联系电话">
        <u-input placeholder="请输入" v-model="queryForm.telephone" />
      </u-form-item>
    </u-form>
    <view class="submit-btns btn-other-cls">
      <u-button plain class="u-btn" type="primary" @click="resetBtn">
        重置
      </u-button>
      <u-button class="u-btn" type="primary" @click="confirmBtn">
        确定
      </u-button>
    </view>
  </view>
</template>

<script>
import checkService from "@/service/check/check.service"

export default {
  components: {
  
  },
  data() {
    return {
      lab_style:{
        fontWeight: 500,
        color: this.$theme.u_main_color,
        fontSize: '.75rem',
      },
      iconStyle:{
        color: '#c0c4cc',
      },
      queryForm:{
        orgUuid:'',
        orgName:'',
        typeUuid:'',
        areaName:'',
        manager:'',
        address:'',
        telephone:'',
      },
      orgSelectShow:false,
      typeShow:false,
      typeList:[],
      orgName:'', // 表单展示的时候queryForm.orgName不显示，所以单独定义的名称
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
    }
  },
  onLoad() {
    
  },
  created(){
    this.queryForm = this.getRouteParam();
    this.orgName = this.queryForm.orgName ? this.queryForm.orgName : '';
    this.getAreaTypeList();
    console.log(this.orgName)
  },
  methods: {
    // 获取类型名称数据
    getAreaTypeList(){
      this.typeList = [];
      checkService.findAreaTypeList({isActive:1,}).then((rs) => {
        if(rs.success && rs.data.length > 0){
          rs.data.forEach((item) => {
            this.typeList.push({value:item.typeUuid,text:item.typeName,}); 
          });	
        }
      }).catch((err) => {
        this.$u.toast(err);
      });
    },
  
    // 类型名称回调事件
    selectTypeConfirm(e){
      e.map((val, index) => {
        this.queryForm.typeUuid = val.value;
        this.queryForm.typeName = val.label;
      });
    },
    confirmBtn(){
      this.$emit('selectChange',this.queryForm);
    },
    resetBtn(){
      this.queryForm = {};
      this.orgName = '';
    },
    choiceOrg(){
      this.$emit("choiceOrg");
    },
  },
}
</script>

<style scoped lang="scss">
.page{
  padding: 0;
}
.cearch_title{
  background-color: #F3F4F5;
  width: 100%;
  height: 82rpx;
  font-size: 32rpx;
  font-weight: 600;
  padding: 22rpx 0 21rpx 32rpx;
  z-index: 999;
  position: fixed;
}
</style>
